<!--
 * @Description: 菜单商品详情
 * @Author: wrysunny
 * @Date: 2024-11-23 08:47:50
 * @LastEditor: wrysunny
 * @LastEditTime: 2024-12-07 14:52:43
-->
<template>
	<view class="">
		<up-navbar :autoBack="true" bgColor="rgba(0,0,0,0)" leftIconColor="#fff"></up-navbar>
		<view class="w-full">
			<up-image
				@click="utils.previewImage($setBaseUrl(goods.appGood?.gallery))"
				:src="$setBaseUrl(goods.appGood?.gallery[0])"
				width="750rpx"
				height="596rpx"
				mode="scaleToFill"
			></up-image>
		</view>
		<view class="px-[32rpx] py-[24rpx] relative">
			<view class="text-[48rpx] text-black">{{ goods.appGood?.name }}</view>
			<view class="text-[26rpx]">{{ goods.appGood?.brief }}</view>
			<!-- <view class="absolute flex items-center justify-center flex-col -top-[32rpx] right-[40rpx]" @click="collectGoodsFn">
				<up-image v-if="goods.goodCollectionVo?.isColl" :src="collected" width="64rpx" height="64rpx"></up-image>
				<up-image v-else :src="collect" width="64rpx" height="64rpx"></up-image>
				<view class="text-[20rpx]">收藏</view>
			</view> -->
		</view>
		<view class="p-[32rpx]">
			<view class="mb-[24rpx] last:mb-0" v-for="item in skuList" :key="item.name">
				<view class="text-[26rpx]">{{ item.name }}</view>
				<view class="flex flex-wrap gap-[24rpx] text-center text-[24rpx] mt-[24rpx]">
					<view
						class="bg-[#F6F6F6] min-w-[152rpx] leading-[60rpx] h-[60rpx] rounded-[8rpx] px-[12rpx]"
						:class="{
							border: it.check,
							'border-second': it.check,
							'bg-[#FDF8F5]': it.check,
							'text-second': it.check
						}"
						v-for="it in item.sku"
						:key="it.id"
						@click="skuClick(item.sku, it)"
					>
						{{ it.value }}
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<up-parse :domain="BASE_URL" :content="goods.appGood?.text"></up-parse>
		</view>
		<view class="px-[28rpx] py-[32rpx]">
			<up-parse :domain="BASE_URL" :content="goods.appGood?.detailBrief"></up-parse>
		</view>
		<view class="px-[28rpx] py-[32rpx]">
			<up-parse :domain="BASE_URL" :content="goods.appMealText?.text"></up-parse>
		</view>
		<view class="h-[240rpx]"></view>
		<view class="h-[240rpx] fixed bottom-0 w-full bg-white flex flex-col justify-between px-[32rpx] py-[24rpx] shadowX">
			<view class="flex items-center justify-between">
				<view class="">
					<view class="text-[28rpx]">
						<text class="text-[#FF4D1B] font-bold">¥{{ currentSku?.price }}</text>
						<text class="text-gray line-through ml-[8rpx]">¥{{ currentSku?.demoPrice }}</text>
					</view>
					<view class="text-[20rpx] text-[#666] line-clamp-2 max-w-[500rpx]">{{ currentMatch }}</view>
				</view>
				<up-number-box v-model="number" :max="currentSku?.stock">
					<template #minus>
						<up-icon name="minus-circle" color="#C39A71" size="20"></up-icon>
					</template>
					<template #input>
						<text class="text-[30rpx] w-[50rpx] text-center">{{ number }}</text>
					</template>
					<template #plus>
						<up-icon name="plus-circle-fill" color="#C39A71" size="20"></up-icon>
					</template>
				</up-number-box>
			</view>
			<view class="grid grid-cols-2 gap-[42rpx] items-center">
				<view
					class="button border border-second text-second"
					:class="{
						grayscale: currentSku?.stock <= 0
					}"
					@click="buyNow"
				>
					立即购买
				</view>
				<view
					class="button bg-second text-white"
					:class="{
						grayscale: currentSku?.stock <= 0
					}"
					@click="addCart"
				>
					加入购物车
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { collectGoods, getGoodsDetailByMenu } from '../../config/api/goods';
import { computed, ref } from 'vue';
// import collect from '@/static/collect.png';
// import collected from '@/static/collected.png';
import { onLoad } from '@dcloudio/uni-app';
import utils from '@/utils/utils';
import { BASE_URL } from '@/utils/http';
import useCart from '@/hooks/useCart';
onLoad((options) => {
	if (options.id) {
		getDetailByMenu(options.id);
	} else {
		utils.showToast('id为空');
	}
});
const number = ref(1);
const { goods, getDetailByMenu, collectGoodsFn } = useDeatilByMenu();
const { skuList, skuClick, currentSku, skuHandler, skuItems, currentMatch } = useSku();
const { addCartFn } = useCart();
function useSku() {
	const skuList = ref([]);
	const skuItems = ref([]);
	const skuHandler = (sku) => {
		const names = [...new Set(sku.map((e) => e.name))];
		const skus = names.map((e) => {
			return {
				name: e,
				sku: sku
					.filter((item) => item.name == e)
					.map((p, i) => {
						return {
							...p,
							check: i == 0 ? true : false
						};
					})
			};
		});
		return skus;
	};
	const skuClick = (sku, it) => {
		sku.forEach((item) => {
			item.check = false;
		});
		it.check = true;
	};
	const currentSku = computed(() => {
		const sku = {};
		skuList.value.forEach((e) => {
			sku[e.name] = e.sku.find((item) => item.check).value;
		});
		return skuItems.value.find((e) => e.productJson == JSON.stringify(sku));
	});
	const currentMatch = computed(() => {
		return skuList.value.reduce((pre, cur, index) => {
			const item = cur.sku.find((e) => e.check);
			const name = item.value;
			const price = item.isPrice ? item.price : 0;
			const isLast = index == skuList.value.length - 1;
			return pre + name + '￥' + price + (isLast ? '' : '+');
		}, '');
	});
	return {
		skuList,
		skuItems,
		skuHandler,
		skuClick,
		currentSku,
		currentMatch
	};
}
function useDeatilByMenu() {
	const goods = ref({});
	const getDetailByMenu = async (id) => {
		// 调用接口获取数据
		try {
			const res = await getGoodsDetailByMenu({
				id
			});
			goods.value = res.data;
			skuList.value = skuHandler(goods.value.appGood.productList);
			skuItems.value = goods.value.appGood.productItemList;
		} catch (e) {
			//TODO handle the exception
		}
	};
	const collectGoodsFn = async () => {
		try {
			const res = await collectGoods(goods.value.appGood.id);
			if (res.code == 200) {
				goods.value.goodCollectionVo.isColl = !goods.value.goodCollectionVo.isColl;
			}
		} catch (e) {
			//TODO handle the exception
		}
	};

	return {
		goods,
		getDetailByMenu,
		collectGoodsFn
	};
}
const buyNow = () => {
	if (currentSku.value.stock <= 0) {
		return utils.showToast('商品已售罄');
	}
	if (!number.value) {
		return utils.showToast('请选择数量');
	}
	uni.navigateTo({
		url: `/pages/checkout/checkout?productItemId=${currentSku.value.id}&num=${number.value}`
	});
};
const addCart = () => {
	if (currentSku.value.stock <= 0) {
		return utils.showToast('商品已售罄');
	}
	if (!number.value) {
		return utils.showToast('请选择数量');
	}
	addCartFn({
		list: [
			{
				productId: currentSku.value.id,
				num: number.value,
				isCheck: true
			}
		]
	});
};
</script>

<style lang="scss" scoped>
.shadowX {
	box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0, 0, 0, 0.04);
}
.button {
	@apply h-[88rpx] flex justify-center items-center rounded-[8rpx] text-[30rpx] font-bold;
}
</style>
